<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>

<link type="text/css" rel="stylesheet" media="all" href="/jQuery.chatbox.css">
<link type="text/css" rel="stylesheet" media="all" href="/animate-custom.css">
<link type="text/css" rel="stylesheet" media="all" href="/style.css">
</head>
<body>


	<script src="/jquery-1.10.2.js"></script>
	<script src="/jQuery.chatbox.js"></script>
	<script src="/socket.io-1.4.5.js"></script>
	
	<script>
		  var name="guest-"+randomString(6);
	
	
            var socket = io.connect('http://172.16.2.237:3000');//fix it
            socket.on('connect', function() {
              socket.emit('join', {
                userName : name
              });
            });
	
            socket.on('broadcast_join', function(data) {
            	if(data.userName!=name){
            		$.chatbox({
                        id:"system",
                        title:'系统消息',
                        type:"system"//,
                       // autoClose:true
                    });
                   $.chatbox("system").message("<a href=\"javascript:void(0)\" onclick=\"messageTo(\'"+data.userName+"\')\">"+data.userName+"</a> 上线了！","system");
            	}
            	 
             });
	
	
            $('form').submit(function() {
                socket.emit('chat', id+"说:<br>"+$('#m').val());
                $('#m').val('');
                return false;
              });

              

              socket.on('broadcast_quit', function(data) {
                $('#messages').append($('<li>').text(data.generateName + '离开了聊天室'));
              });
              
              socket.on('private', function(msg) {//私聊消息
            	  $.chatbox({
            	        id:msg.from,
            	        title:msg.from,
            	        user:"我",
            	        type:"chat",
            	        onMessageSend:function(content){
            	        	//debugger;
            	          socket.emit('private', {"from":msg.to,"to":msg.from,"content":content});
            	        }
            	  });
            	  $.chatbox(msg.from).message(msg,"from");
              });
              
              socket.on('system', function(msg) {//系统消息
            	  $.chatbox({
                      id:"system",
                      title:'系统消息',
                      type:"system"//,
                     // autoClose:true
                  });
                 $.chatbox("system").message(msg,"system");
                });
	
//	});
		
	//})
	

function messageTo(userName){
	$.chatbox({
        id:userName,
        title:userName,
        user:"我",
        type:"chat",
        onMessageSend:function(msg){
        	socket.emit('private', {"from":name,"to":userName,"content":msg});
        }
  });
	//$.chatbox(userName).message("哈哈","to");
}
		
		
		function randomString(len) {
			　　len = len || 32;
			　　var $chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890';
			　　var maxPos = $chars.length;
			　　var pwd = '';
			　　for (i = 0; i < len; i++) {
			　　　　pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
			　　}
			　　return pwd;
			}
	</script>
</body>
</html>